<template>
  <div class="emp_info">
    <section class='section'>
      <div class="emp_info_head">
        <div class="info_img">
          <img :src="srcImg" height="100%" style="border-radius:50%;" alt="">
        </div>
        <div class="info_txt">
          <div class="txt_main">
            <h1>{{emplInfo && emplInfo.name}}</h1>
            <div><span class="txts">{{emplInfo && emplInfo.sex_descr}}</span><span class="txts">{{emplInfo && emplInfo.mar_desc}}</span><span class="txts">{{emplInfo && emplInfo.ethnic_grp}}</span><span class="txts">{{emplInfo && emplInfo.birthdate | timeFormat(0,10)}}{{getAge()}}</span></div>
            <!-- <a @click.stop ='superCodeVisible = true' style='right:130px'>超级验证码</a> -->
            <a @click="goResumeUrl" target="_blank">进入个人履历</a>
          </div>
          <h2>{{emplInfo && emplInfo.position_desc}}</h2>
          <div class="basic_info">
            <div class="basic_left" style="">
              <ul class="basic_list">
                <li class="basic_items">
                  <span class="info_name">电话</span>
                  <span class="info_val">{{emplInfo && emplInfo.busn_mobile}}</span>
                </li>
                <li class="basic_items">
                  <span class="info_name">邮箱</span>
                  <span class="info_val">{{emplInfo && emplInfo.email_addr}}</span>
                </li>
                <li class="basic_items">
                  <span class="info_name">籍贯</span>
                  <span class="info_val">{{emplInfo && emplInfo.native_place_chn}}</span>
                </li>
                <li class="basic_items">
                  <span class="info_name">出生地</span>
                  <span class="info_val " >{{emplInfo && emplInfo.birthplace}}</span>
                </li>
              </ul>
            </div>
            <div class="basic_right">
              <ul class="basic_list">
                <li class="basic_items">
                  <span class="info_name">最高学历</span>
                  <span class="info_val">{{emplInfo && emplInfo.highest_edu}}</span>
                </li>
                <li class="basic_items">
                  <span class="info_name">最高学位</span>
                  <span class="info_val">{{emplInfo && emplInfo.highest_deg}}</span>
                </li>
                <li class="basic_items">
                  <span class="info_name">毕业院校</span>
                  <span class="info_val " :title="emplInfo.school_descr">
                    <b>{{emplInfo && emplInfo.school_descr}}</b>
                    
                  </span>
                </li>
                <li class="basic_items">
                  <span class="info_name">专业</span>
                  <span class="info_val">
                    <b>{{emplInfo && emplInfo.major_descr}}</b>
                  </span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="emp_info_footer">
        <div>

          <span class="salary-btn target-btn" @click="popMysalary" >我的工资</span>
          <span class="vacation-btn target-btn" @click="popVacation" >查看假期</span>

          <span class="leave-btn target-btn" v-if="applyLeavePlatform" @click="popMyLeave" >发起休假</span>

          <span class="passport-btn target-btn" v-if="SCShow" @click='huzhaoDialogVisible = true' >外事证件</span>
          <span class="report-btn target-btn" v-if="reportPlatform" @click="ToLeaderHome('1')" >报表平台</span>
          
          
          <span class="leader-btn target-btn" v-if="leaderPortal" @click="ToLeaderHome('2')">领导门户</span>
      		<span class="report-btn target-btn" v-if="holidayPlatform" @click="ToSetting" >系统设置</span>
      		
      		<span class="report-btn target-btn" v-for="item in leaderList"  @click="ToLeave(item)" >{{item.principalName}}请假</span>
      		
        </div>
      </div> -->
    </section>
    <v-dialog :dialogVisible.sync="vacationVisible"></v-dialog>
    <huzhao-dialog 
    :dialogShowIf.sync='huzhaoDialogVisible'>
    </huzhao-dialog> 

    <s-dialog :dialogVisible.sync="salaryVisible" :passwordStatus.sync='passwordStatus' :phoneNum.sync="phoneNum"></s-dialog>
    <!-- <supercode-dialog :dialogVisible.sync="superCodeVisible"></supercode-dialog> -->
  </div>
</template>

<script>
import Vue from 'vue'
import { Button } from 'element-ui'
import VDialog from '@/components/public/vacation'
import SDialog from '@/components/public/salaryPassword'
import HuzhaoDialog from '@/components/employee/requestVacation/huzhaoDialog'
import SupercodeDialog from '@/components/employee/superCode'
import { _encode } from '@/common/js/handleCode'

Vue.use(Button)
export default {
	name: 'emp_info',
	props: [
		'emplInfo',
		'urlTarget',
		'reportPlatform',
		'leaderPortal',
		'holidayPlatform',
		'srcImg',
		'applyLeavePlatform',
		'leaderList'
	],

	data () {
		return {
			vacationVisible: false,
			emplid: null,
			huzhaoDialogVisible: false,
			salaryVisible: false,
			passwordStatus: '',
			phoneNum: '',
		}
	},
	mounted () { },
	methods: {
		ToSetting: function () {
			var newTab

			newTab = window.open('about:blank')
			if (
				newTab.localStorage.getItem('token') !== localStorage.getItem('token')
			) {
				newTab.localStorage.clear()
			}
			newTab.location.href = this.Axios.baseURI + '/#/backStageManager'
		},

		ToPassport: function () { },

		ToLeaderHome: function (type) {
			var newTab

			if (
				location.hostname === '10.5.0.137' ||
        location.hostname === 'localhost'
			) {
				newTab = window.open('about:blank')
				this.clearLocalStorage(newTab)

				newTab.location.href = location.origin + '/#/home'
				return
			}

			if (
				localStorage.getItem('para') == 'undefined' ||
        !localStorage.getItem('para')
			) {
				return
			}

			var params = JSON.parse(localStorage.getItem('para'))

			newTab = window.open('about:blank')

			this.Axios.Post(this.URL.getURL.url, params).then(res => {
				// if (location.hostname === "10.5.0.137" || location.hostname === "localhost") {
				// 	this.$router.push('/home/homepage');
				// 	return;
				// }
				this.clearLocalStorage(newTab)

				if (!res.data.datas) {
					newTab.location.href = this.Axios.baseURI + '/#/home'
					//				  	  this.$router.push('/home/homepage');
				} else {
					if (type == '1' && res.data.datas.reportUrl) {
						newTab.location.href = res.data.datas.reportUrl.trim()

						//				  	 	  window.open(res.data.datas.reportUrl.trim());
						//				  	 		location.href = res.data.datas.reportUrl.trim();
					} else if (type == '2' && res.data.datas.urlToLeader) {
						//				  	 		setTimeout(() => {
						//				  	 			newTab.location.href=res.data.datas.reportUrl.trim();
						//				  	 		},10)
						newTab.location.href = res.data.datas.urlToLeader.trim()
						//				  	 		window.open(res.data.datas.urlToLeader.trim());
						//				  	 		location.href = res.data.datas.urlToLeader.trim();
					}
				}
			})
		},

		getAge () {
			if (this.emplInfo && this.emplInfo.birthdate) {
				let Data = new Date()
				let year = Data.getFullYear()
				let age = ''
				let birthYear = this.emplInfo && this.emplInfo.birthdate.substr(0, 4)
				return Number(year) - Number(birthYear)
					? '(' + (Number(year) - Number(birthYear)) + ')'
					: ''
			}
		},
		goResumeUrl () {
		
			const params = {
				resumeType: 1
			}

			window.open('/module/resume.html?' + _encode(JSON.stringify(params)))
		},
		clearLocalStorage: function (newTab) {
			var token = newTab.localStorage.getItem('token')

			var token1 = localStorage.getItem('token')
			if (token && token1 && token !== token1) {
				newTab.localStorage.clear()
			}
		},
		popVacation () {
			var newTab
			newTab = window.open('about:blank')
			this.clearLocalStorage(newTab)
			if (location.hostname !== 'localhost') {
				newTab.location.href = this.Axios.baseURI + '/#/homepage2/myVacation'
			} else {
				newTab.location.href = location.origin + '/#/homepage2/myVacation'
			}
		},

		popMysalary () {

			// 如果后代返回10001 直接跳转到我的工资页面
			// 否则 弹出Dialog 输入密码

			this.Axios.Post(this.URL.queryTwoPassword.url)
				.then((res) => {

					this.passwordStatus = res.data.datas
					console.log(this.passwordStatus, 'console.log(this.passwordStatus);')
					if (this.passwordStatus == 10001) {

						// var newTab = window.open('about:blank');
						// debugger;
						// this.clearLocalStorage(newTab);
						// if (location.hostname !== 'localhost') {
						//   newTab.location.href = this.Axios.baseURI + '/#/mySalary';
						// } else {
						//   newTab.location.href = location.origin + '/#/mySalary';
						// }

						this.$router.push({ path: 'mySalary' })
					} else {
						this.salaryVisible = true
					}
				})
				.catch((err) => {
					console.log(err)

					this.salaryVisible = true
				})
			// var newTab = window.open('about:blank');
			// this.clearLocalStorage(newTab);
			// if (location.hostname !== 'localhost') {
			//   newTab.location.href = this.Axios.baseURI + '/#/mySalary';
			// } else {
			//   newTab.location.href = location.origin + '/#/mySalary';
			// }


		},
		popMyLeave () {
			var newTab
			newTab = window.open('about:blank')
			this.clearLocalStorage(newTab)
			if (location.hostname !== 'localhost') {
				newTab.location.href = this.Axios.baseURI + '/#/mySend'
			} else {
				newTab.location.href = location.origin + '/#/mySend'
				// newTab.location.href =this.Axios.baseURI + '/#/mySend';
			}
		},
		ToLeave (item) {
			var newTab
			newTab = window.open('about:blank')
			this.clearLocalStorage(newTab)
			var param = {
				principalId: item.principalId,
				name: item.principalName
			}
			localStorage.setItem('lids', JSON.stringify(param))
			if (location.hostname !== 'localhost') {
				newTab.location.href = this.Axios.baseURI + '/#/myLeaderSend'
			} else {
				newTab.location.href = location.origin + '/#/myLeaderSend'
				// newTab.location.href =this.Axios.baseURI + '/#/mySend';
			}
		}
	},
	components: {
		'v-dialog': VDialog,
		HuzhaoDialog,
		SDialog,
		SupercodeDialog
	},
	computed: {
		SCShow: function () {
			return (
				location.hostname === '10.5.0.137' || location.hostname === 'localhost'
			)
		}
	},
	filters: {
		timeFormat: function (value, start, length) {
			if (value) {
				return value.substr(start, length).replace(/-/g, '.')
			}
		}
	}
}
</script>

<style scoped>
.emp_info_head {
  /* border-bottom: 1px solid #ecf0f5; */
  min-height: 240px;
  overflow: hidden;
  padding: 13px 0px 0;
}
.emp_info_footer .target-btn {
  display: inline-block;
  margin-right: 1.5%;
  border-radius: 25px;
  color: #fff;
  padding: 0 15px;
  height: 26px;
  line-height: 26px;
}
.emp_info_footer .target-btn:hover {
  cursor: pointer;
}
.salary-btn {
  background: #5fb3f9;
}
.vacation-btn {
  background: #22ceb8;
}
.leave-btn {
  background: #a991f2;
}
.report-btn {
  background: rgba(212, 42, 13, 0.72);
}
.passport-btn {
  background: rgb(155, 43, 33);
}
.leader-btn {
  background: #5fb3f9;
}
.info_img {
  width: 168px;
  height: 168px;
  float: left;
  margin-top: 10px;
  margin-left: 20px;
}
.info_txt {
  width: calc(100% - 190px);
  float: right;
}
.info_txt .txt_main {
  height: 50px;
  line-height: 50px;
  position: relative;
}
.info_txt a:hover {
  cursor: pointer;
}
.info_txt .txt_main h1 {
  float: left;
  font-size: 25px;
  margin-right: 20px;
}
.info_txt .txt_main .txts {
  margin-right: 13px;
  font-size: 14px;
}
.info_txt .txt_main a {
  position: absolute;
  right: 20px;
  top: 0;
  color: #38f;
}
.info_txt h2 {
  font-size: 15px;
}
.basic_info {
  overflow: hidden;
  margin: 15px 0 0;
}
.basic_info .basic_left {
  width: 43%;
  float: left;
}
.basic_info .basic_items {
  line-height: 25px;
}
.basic_info .basic_items .info_name {
  display: inline-block;
  width: 25%;
  text-align: right;
  font-size: 13px;
  vertical-align: top;
  color: #999;
}
.basic_info .basic_items .info_val {
  padding-left: 10px;
  font-size: 13px;
  display: inline-block;
  width: 73%;
  vertical-align: top;
}
.basic_info .basic_right {
  width: 50%;
  float: left;
}
.basic_info .info_val b {
  margin-right: 10px;
  font-weight: 100;
}
.emp_info_footer {
  text-align: center;
  line-height: 30px;
  height: 30px;
  margin-top: 20px;
}

.emp_info_footer .el-button {
  border-radius: 25px;
  height: 28px;
  padding: 0;
  color: #fff;
  border: 1px solid #fff;
}
.emp_info_footer span,
.emp_info_footer a {
  display: block;
  padding: 0 15px;
  height: 26px;
  line-height: 26px;
}
.emp_info_footer .wages {
  background: #5fb3f9;
}
.emp_info_footer .wages:hover {
  background: #4392d3;
}
.emp_info_footer .Cvacation {
  background: #22ceb8;
}
.emp_info_footer .Cvacation:hover {
  background: #1ca997;
}
.emp_info_footer .launch {
  background: #a991f2;
}
.emp_info_footer .launch:hover {
  background: #876bdb;
}
.emp_info_footer .leader {
  background: #5fb3f9;
}
.emp_info_footer .leader:hover {
  background: #408fd0;
}
</style>
